<template>
  <div :style="zIndex ? { zIndex } : {}" v-eet="{ appear: appear, animation: animation, onstatus: onstatus }">
    <slot></slot>
  </div>
</template>

<script type="text/javascript">
import { emits, props } from './ee-animation'

/** 使用eet样式和指令的DOM元素
 * @example
 * <ee-animation in animation="fade">应用了动画的内容<ee-animation>
 */
export default {
  name: "ee-animation",
  emits,
  data() {
    return {
      /** DOM元素是否还在场，可用于其它组件是否一起显示的判断
       * @example
       * <ee-animation ref="eet" />
       * <element v-show="$refs.eet?.isIn"/>
       */
      isAppear: false,
    }
  },
  props,
  methods: {
    onstatus(status, value, el, e) {
      if (status == 'stop') {
        this.$emit('begin', this, value, el, e);
      } else if (status == 'end') {
        this.$emit('end', this, value, el, e);
        this.$emit(value ? 'in' : 'out', this, value, el, e);
        this.isAppear = value;
      }
    }
  },
  watch: {
    appear(value) {
      this.isAppear = true;
    }
  },
}
</script>